<template>
  <div class="mci-card relative" :style="{ border: showBorder ? '1px solid #00ac9866' : '' }">
    <div
      v-if="title"
      class="card-title flex items-center px-16"
      :class="[showBackgroundColor ? 'title-bg py-4 h-32' : 'py-12 h-48']"
    >
      <div class="flex items-center title-content" :class="isSm?'mr-8':'mr-25'">
        <span v-if="isCustomIcon" class="title-left-icon mr-8"></span>
        <span v-else class="flex justify-center items-center inline-block w-18 h-18 card-title-icon mr-8">
          <span class="inline-block w-6 h-6"></span>
        </span>
        <span
          class="inline-block card-title-label text-4rem"
          :class="isCustomIcon ? 'text-black' : ''"
          :style="{ color: showBackgroundColor ? 'rgba(255, 255, 255, 0.88)' : '#45BFB0' }"
        >{{ title }}</span>
      </div>
      <slot name="titleLeft"></slot>
      <div class="absolute right-16" :class="[showBackgroundColor && isSafariComp?'-top-2':'']">
        <slot name="titleRight"></slot>
      </div>
    </div>
    <div class="w-full overflow-auto" :class="showBackgroundColor ? 'card-content-short-header' : 'card-content'">
      <slot></slot>
    </div>
    <div v-if="showCornerTL" class="cornerTL inline-block absolute -top-1 -left-1 w-16 h-16"></div>
    <div v-if="showCornerTR" class="cornerTR inline-block absolute -top-1 -right-1 w-16 h-16"></div>
    <div v-if="showCornerBL" class="cornerBL inline-block absolute -bottom-1 -left-1 w-16 h-16"></div>
    <div v-if="showCornerBR" class="cornerBR inline-block absolute -bottom-1 -right-1 w-16 h-16"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { isSafari } from 'microconnect-common/utils/is';
import { getLocal } from 'microconnect-common/utils/storage';

export default defineComponent({
  name: 'Card',
  props: {
    isCustomIcon: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    showBackgroundColor: {
      type: Boolean,
      default: false
    },
    showBorder: {
      type: Boolean,
      default: false
    },
    showCornerTL: {
      // 是否显示左上角图标
      type: Boolean,
      default: false
    },
    showCornerTR: {
      type: Boolean,
      default: false
    },
    showCornerBL: {
      type: Boolean,
      default: false
    },
    showCornerBR: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const isSm = computed(() => getLocal('screenType') === 'sm');
    const isSafariComp = computed(() => isSafari);
    return{
      isSm,
      isSafariComp
    };
  }
});
</script>

<style lang="scss" scoped>
.mci-card {
  // background-color: var(--color-fill-1);
  border-radius: 8px;
  .card-title {
    .card-title-icon {
      border: 1px solid var(--color-brand-6);
      span {
        background: var(--color-brand-6);
        filter: blur(2px);
      }
    }
    .card-title-label {
      color: var(--color-brand-6);
      display: flex;
      align-items: center;

      white-space: nowrap;
    }
  }
  .title-left-icon {
    width: 8px;
    height: 8px;
    transform: rotate(-45deg);background: var(--6-normal, #00AC97);
    box-shadow: 0px 4px 4px 0px rgba(0, 172, 151, 0.40);
  }
  .card-content {
    height: calc(100% - 48px);
  }
  .card-content-short-header {
    height: calc(100% - 32px);
  }

  .title-bg {
    background-image: linear-gradient(to right, #00ac9866, #23bfac00);

    .card-title-icon span {
      background-image: radial-gradient(var(--color-brand-6), #1e3438);
    }
  }

  .title-tick {
    @apply w-16 h-16 cursor-pointer ml-4;
  }

  .cornerTL {
    border-top: 2px solid var(--color-brand-6);
    border-left: 2px solid var(--color-brand-6);
  }
  .cornerTR {
    border-top: 2px solid var(--color-brand-6);
    border-right: 2px solid var(--color-brand-6);
  }
  .cornerBL {
    border-bottom: 2px solid var(--color-brand-6);
    border-left: 2px solid var(--color-brand-6);
  }
  .cornerBR {
    border-bottom: 2px solid var(--color-brand-6);
    border-right: 2px solid var(--color-brand-6);
  }
  .text-black {
    font-weight: 600;
    color: var(--color-text-5) !important;
  }
}
</style>
